<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<style>
    .body {
        width: 300px;
        height: 500px;
        background-color: #211d5a;
        border-radius: 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .text {
        font-size: 24px;
        color: white;
        margin-top: 60px;
        text-shadow: 2px 2px 2px #fff;
    }

    .count {
        position: relative;
        width: 200px;
        height: 200px;
        margin-top: 60px;
        border: 10px solid;
        border-color: rgb(79, 59, 156);
        border-radius: 50%;
        display: flex;
    }

    .ft {
        font-size: 100px;
        color: #fff;
        /*left: 50%;
        margin-left: -102px;
        margin-top: 40px;*/
        margin: auto;
    }

    .btn {
        width: 220px;
        display: flex;
        /*flex-direction: row;*/
        justify-content: space-between;
        margin-top: 60px;
    }

    .btn1 {
        width: 50px;
        height: 30px;
        border: 0px;
        border-radius: 4px;
        background-color: rgb(79, 59, 156);
        font-size: 20px;
        color: #efdaff;
    }

    .btn2 {
        width: 50px;
        height: 30px;
        border: 0px;
        border-radius: 4px;
        background-color: rgb(79, 59, 156);
        font-size: 22px;
        color: #efdaff;
    }

</style>

<body>
<div class="body">
    <div class="text">
        <font>Counter</font>
    </div>
    <div class="count">
				<span id="demo" class="ft">
					2
				</span>
    </div>
    <div class="btn">
        <button type="button" class="btn1" onclick="add()">＋</button>
        <button type="button" class="btn2" onclick="zero()">零</button>
        <button type="button" onclick="sub()" class="btn1">－</button>

    </div>
</div>
</body>

<script type="text/javascript">
    var counter = document.getElementById("demo").innerHTML;

    function add() {
        counter++;
        document.getElementById("demo").innerHTML = counter;
    }

    function sub() {
        if (counter == 0) {
            counter = 0;
        } else {
            counter--;
            document.getElementById("demo").innerHTML = counter;
        }
    }

    function zero() {
        counter = 0;
        document.getElementById("demo").innerHTML = counter;
    }
</script>


</html>